<template>
  <div ref="viewbox">
    <Headers></Headers>
    <div class="banners">
      <el-carousel trigger="click" height="700px">
        <el-carousel-item v-for="item in imgbox" :key="item">
          <img v-bind:src="item" alt="" >
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="main">
      <div class="solution">
        <div class="w1200">
          <p class="title">产品解决方案</p>
          <span></span>
          <p class="info">天臣软件以平台化技术、专业化服务打造精细化的软件产品和数据服务解决方案，通过丰富的业务知识和实施经验积累，不断创新产品与服务平台。天臣软件的企业数据收集系统、智能分析管理系统、数据管理解决方案等优秀解决方案正在为广大用户提供系统专业的信息化支持。</p>
        </div>
      </div>
      <div class="lists">
        <div class="w1200 clear">
          <div class="list fadeIn" v-for="(list,index) in lists" v-bind:class="['delay-'+index+'s',{animated : isactive}]" v-if="isactive">
            <p>{{list.title}}</p>
            <img v-bind:src="list.url" alt="">
          </div>
        </div>
      </div>
      <div class="solution">
        <div class="w1200">
          <p class="title">咨询分享</p>
          <span></span>
        </div>
      </div>
      <div class="news">
        <div class="w1200 clear">
          <div class="imgboxs">
            <img src="../../assets/home/info.png" alt="">
          </div>
          <div class="texts">
            <ul>
              <li v-for="item in texts">
                <a href="">
                  <div class="datas">
                    <p>{{item.data}}</p>
                    <p>{{item.datas}}</p>
                  </div>
                  <div class="content">
                    <p>{{item.title}}</p>
                    <p>{{item.content | ellipsis}}</p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="lookmore">
        <a href="">更多资讯</a>
      </div>
    </div>
    <Foots></Foots>
  </div>
</template>

<script>
import Headers from '../../components/Headers'
import Foots from '../../components/Foots'
export default {
  name: 'Home',
  components: {
    Headers: Headers,
    Foots: Foots
  },
  data () {
    return {
      imgbox: [
        require('../../assets/home/banner1.jpg'),
        require('../../assets/home/banner2.jpg'),
        require('../../assets/home/banner3.jpg')
      ],
      lists: [
        {
          'title': '企业数据收集系统', 'url': './static/home/product1.png'
        },
        {
          'title': '财务风险预警系统', 'url': './static/home/product2.png'
        },
        {
          'title': '智能分析管理系统', 'url': './static/home/product3.png'
        },
        {
          'title': '资产地图管理系统', 'url': './static/home/product4.png'
        },
        {
          'title': '投资项目管理系统', 'url': './static/home/product5.png'
        },
        {
          'title': '集团资金管控系统', 'url': './static/home/product6.png'
        },
        {
          'title': '数据管理解决方案', 'url': './static/home/product7.png'
        },
        {
          'title': '国资监管解决方案', 'url': './static/home/product8.png'
        }
      ],
      texts: [],
      isactive: false
    }
  },
  methods: {
    appScroll: function () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollTop)
      if (scrollTop > 300) {
        this.isactive = true
      }
    }

  },
  created () {
    let that = this
    that.$axios.get('https://www.easy-mock.com/mock/5c00e13a57282f4cecbc6628/lchen/homenews').then(function (data) {
      that.texts = data.data.data
    }).catch(function (error) {
      that.$message({
        message: error,
        type: 'error'
      })
    })
  },
  mounted () {
    this.box = this.$refs.viewbox
    console.log(this.box)
    window.addEventListener('scroll', this.appScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.appScroll)
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 80) {
        return value.slice(0, 80) + '...'
      }
      return value
    }
  }
}
</script>

<style scoped lang="less">
.main{
  padding-top: 70px;
  padding-bottom: 90px;
  background: #f4f4f4;
  position: relative;
  .solution{
    padding-top: 70px;
    padding-bottom: 79px;
    .w1200{
      width: 1200px;
      margin: 0 auto;
      .title{
        text-align: center;
        font-size: 24px;
        color: #666666;
      }
      span{
        display: block;
        width: 35px;
        height: 1px;
        background: #999;
        margin: 0 auto;
        margin-top: 17px;
        margin-bottom: 22px;
      }
      .info{
        font-size: 14px;
        color: #a3a3a3;
        text-align: center;
        line-height: 1.8;
      }
    }
  }
  .lists{
    margin-top: 60px;
    .w1200{
      margin: 0 auto;
      width: 1200px;
      .list{
        width: calc(25% - 13px);
        height: 275px;
        float: left;
        margin-left: 13px;
        margin-bottom: 13px;
        border-radius: 10px 10px;
        overflow: hidden;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        &.activeds{
          text-align: center;
          font-size: 18px;
        }
        &:nth-child(2n){
          background: #ef9095;
        }
        &:nth-child(2n-1){
          background: #3372c1;
        }
        p{
          margin-top: 59px;
          margin-bottom: 57px;
        }
        img{
          max-width: 100%;
        }
      }
    }
  }
  .news{
    .w1200{
      width: 1200px;
      margin: 0 auto;
      .imgboxs{
        float: left;
        width: 540px;
        height: 327px;
        overflow: hidden;
        float: left;
      }
      .texts{
        overflow: hidden;
        padding-left: 45px;
        ul{
          li{
            width: 100%;
            height: 108px;
            border-bottom: 1px solid #c8c8c8;
            /*padding-top: 10px;*/
            &:first-child{
              padding-top: 0;
            }
            a{
              display: block;
              width: 100%;
              height: 100%;
              .datas{
                width: 90px;
                float: left;
                p:first-child{
                  font-size: 54px;
                  color: #c8c8c8;
                  font-family: "Impact";
                }
                p:nth-child(2){
                  font-size: 14px;
                  color: #c8c8c8;
                  font-family: "Microsoft Yahei";
                  font-weight: bold;
                  line-height: 1.5;
                }
              }
              .content{
                overflow: hidden;
                padding-top: 13px;
                p{
                  &:first-child{
                    font-size: 16px;
                    color: #666666;
                    font-family: "Microsoft Yahei";
                    font-weight: bold;
                    margin-bottom: 14px;
                  }
                  &:nth-child(2){
                    color: #999999;
                    font-size: 12px;
                    font-family: "Microsoft Yahei";
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .lookmore{
    width: 144px;
    height: 47px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    margin: 0 auto;
    margin-top: 90px;
    a{
      display: block;
      text-align: center;
      width: 100%;
      height: 100%;
      color: #666;
      font-size: 14px;
      font-family: "Microsoft YaHei";
      line-height: 47px;
    }
  }
}
.animated.delay-0s{animation-delay:0s}
.animated.delay-1s{animation-delay:0.4s}
.animated.delay-2s{animation-delay:0.8s}
.animated.delay-3s{animation-delay:1.2s}
.animated.delay-4s{animation-delay:1.6s}
.animated.delay-5s{animation-delay:2s}
.animated.delay-6s{animation-delay:2.4s}
.animated.delay-7s{animation-delay:2.8s}
.animated.delay-8s{animation-delay:3.2s}
</style>